<template>
  <div class="app-container">
    <!-- 条件查询 -->
    <div style="margin-bottom: 10px;">
      <el-form :inline="true">
        <el-form-item label="题型">
          <el-select v-model="queryParam.filters[0].value" clearable>
            <el-option
              v-for="(value, key) in questionTypeEnum"
              :key="key"
              :label="value"
              :value="+key"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" @click="_getQuestionList"></el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="toolbar">
      <el-button type="primary" @click="handleAddQuestion">新增</el-button>
      <el-button type="danger" @click="handleDeleteQuestion" :disabled="!multipleSelection.length"
        >删除</el-button
      >
    </div>
    <template>
      <div>
        <Tabel
          :tableData="tableData"
          :cols="cols"
          :isSelect="true"
          @selection-change="handleSelectionChange"
        >
          <template #operationCol>
            <el-table-column>
              <template slot-scope="{ row }">
                <el-button type="text" @click="handleEditQuestion(row, 1)">编辑</el-button>
              </template>
            </el-table-column>
          </template>
        </Tabel>
        <pagination
          v-show="total > 0"
          :total="total"
          :page.sync="queryParam.pageNumber"
          :limit.sync="queryParam.pageSize"
          @pagination="_getQuestionList"
        />
      </div>
    </template>
    <el-dialog
      :title="submitType ? '编辑' : '新增'"
      :visible.sync="dialogVisible"
      :close-on-click-modal="false"
    >
      <div>
        <el-form ref="form" :model="formData">
          <el-form-item v-for="item of cols" :key="item.key" :label="item.label" :prop="item.key">
            <el-input
              v-model="formData[item.key]"
              :disabled="submitType && item.notAllowEdit"
            ></el-input>
          </el-form-item>
        </el-form>
      </div>
      <div slot="footer">
        <el-button type="primary" @click="submit">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import Tabel from '@/components/Table'
  import {
    getQuestionList,
    addQuestion,
    editQuestion,
    deleteQuestion
  } from '@/api/TeachingCenter/questionManage'
  import Pagination from '@/components/Pagination'
  import Mixin from './mixin'
  export default {
    name: 'questionManage',

    mixins: [Mixin],
    components: { Tabel, Pagination },
    data() {
      return {
        tableData: [],
        queryParam: {
          pageNumber: 1,
          pageSize: 10,
          filters: [
            {
              value: '',
              paramName: 'question_Type',
              paramOperator: 'EQ'
            }
          ]
        },
        total: 0,
        multipleSelection: [],
        dialogVisible: false,
        formData: {},
        submitType: null //0：新增,1:修改
      }
    },
    created() {
      this._getQuestionList()
    },
    methods: {
      async _getQuestionList() {
        const { filters, ...params } = this.queryParam
        params.filters = filters.filter((item) => {
          return !!item.value
        })
        const { data } = await getQuestionList(params)
        this.tableData = data.records
        this.total = data.total
      },
      handleAddQuestion() {
        this.$router.push({ path: './add', query: { type: 0 } })
      },
      handleEditQuestion({ id }, type) {
        const pathObj = {
          1: './edit',
          2: './detail'
        }
        this.$router.push({ path: pathObj[type], query: { id, type } })
      },
      handleDeleteQuestion() {
        this.$confirm('是否进行删除操作?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(async () => {
          const ids = this.multipleSelection.map((item) => item.id)
          await deleteQuestion({ ids })
          this._getQuestionList()
          this.$Msg.success('删除成功!')
        })
      },
      handleSelectionChange(val) {
        this.multipleSelection = val
      },
      async submit() {
        const submitArr = [addQuestion, editQuestion]
        const parmas = this.formData
        await submitArr[this.submitType](parmas)
        this._getQuestionList()
        this.$Msg.success('操作成功!')
        this.dialogVisible = false
      }
    }
  }
</script>
